<template>
  <div>
    <div class="first_part" style="height: 200px">
      <div>
        客户最多: <span>{{ mostCustomerName }}</span>
        <br />
        数量: <span>{{ mostCustomerNum }}</span>
      </div>
      <div>
        今日回访最多: <span>{{ callMostCustomerName }}</span>
        <br />
        数量: <span>{{ callMostCustomerNum }}</span>
      </div>
      <div>
        今日有效回访最多: <span>{{ isOkCallMostCustomerName }}</span>
        <br />
        数量: <span>{{ isOkCallMostCustomerNum }}</span>
      </div>
    </div>
    <div>
      <!-- 当天回访图 -->
      <div id="second_part"></div>
      <!-- 当月回访图 -->
      <div id="third_part"></div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import { dateFormatArr } from "@/utils/time.js";

export default {
  name: "Index",
  data() {
    return {
      mostCustomerName: "暂无数据",
      mostCustomerNum: 0,
      callMostCustomerName: "暂无数据",
      callMostCustomerNum: 0,
      isOkCallMostCustomerName: "暂无数据",
      isOkCallMostCustomerNum: 0,

      todayNames: [], // 今天 echarts 的姓名
      todayVisits: [], // 今天 echarts 回访数
      todayIsOkVisits: [], // 今天 echarts 有效回访

      last30DateTime: [], // 近 30 天的 datetime
      last30Info: [], // 近 30 天的消息组
      last30Name: [], // 近 30 销售名数组
    };
  },
  methods: {
    handleInitIndexData() {
      let roleId = this.COOKIE.get("role_id");
      let uid = this.COOKIE.get("uid");
      this.AXIOS.get(`/mycrmapi/index/${uid}/${roleId}`)
        .then((resp) => {
          let respObj = resp.data.data;
          // console.log(respObj)
          this.mostCustomerName =
            respObj.mostCustomerNum === 0
              ? "暂无数据"
              : respObj.mostCustomerName;
          this.mostCustomerNum = respObj.mostCustomerNum;
          this.callMostCustomerName =
            respObj.callMostCustomerNum === 0
              ? "暂无数据"
              : respObj.callMostCustomerName;
          this.callMostCustomerNum = respObj.callMostCustomerNum;
          this.isOkCallMostCustomerName =
            respObj.isOkCallMostCustomerNum === 0
              ? "暂无数据"
              : respObj.isOkCallMostCustomerName;
          this.isOkCallMostCustomerNum = respObj.isOkCallMostCustomerNum;
          // 当天
          for (let obj of respObj.todayData) {
            // console.log(obj)
            this.todayNames.push(obj.name);
            this.todayVisits.push(obj.isok_visits_day);
            this.todayIsOkVisits.push(obj.visits_day);
          }

          // 最近 30 天
          let last30AllNameArr = []; // 存放最近 30 天所有人的名字
          let last30TimeArr = [];
          for (let obj of respObj.last30Data) {
            last30AllNameArr.push(obj.name);
            last30TimeArr.push(obj.created_at);
          }
          // 需要去重
          this.last30Name = Array.from(new Set(last30AllNameArr));
          last30TimeArr = Array.from(new Set(last30TimeArr));
          this.last30DateTime = dateFormatArr(last30TimeArr);
          // console.log(last30AllNameArr)
          // 通过名字去数据里取对应的值
          let last30Info = [];
          for (let name of this.last30Name) {
            // console.log(name)
            let dataMap = { name: name, type: "line" };
            let dataArr = [];
            for (let obj of respObj.last30Data) {
              if (obj["name"] === name) {
                dataArr.push(obj.isok_visits_day);
              }
            }
            dataMap["data"] = dataArr;
            last30Info.push(dataMap);
          }
          this.last30Info = last30Info;
          // console.log('last30name:', this.last30Name)
          // console.log('last30date:', this.last30DateTime)
          // console.log('last30Info:', this.last30Info)

          // 初始化 echarts
          this.handleInitToday();
          this.handleInitMonth();
        })
        .catch((err) => {
          this.$message({ type: "error", message: err });
        });
    },
    handleInitToday() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("second_part"));
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: "今日回访情况",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        legend: {
          data: ["今日回访", "今日有效回访"],
        },
        xAxis: [
          {
            type: "category",
            data: this.todayNames,
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "人数",
            min: 0,
            max: 100,
            interval: 20,
            axisLabel: {
              formatter: "{value} 个",
            },
          },
        ],
        series: [
          {
            name: "今日回访",
            type: "bar",
            data: this.todayVisits,
          },
          {
            name: "今日有效回访",
            type: "bar",
            data: this.todayIsOkVisits,
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    handleInitMonth() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("third_part"));
      let option = {
        title: {
          text: "近30天有效回访走势图",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: this.last30Name,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.last30DateTime,
        },
        yAxis: {
          name: "人数",
          type: "value",
          min: 0,
          max: 100,
          interval: 20,
          axisLabel: {
            formatter: "{value} 个",
          },
        },
        series: this.last30Info,
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
  mounted() {
    this.handleInitIndexData();
  },
};
</script>

<style scoped>
.first_part div {
  float: left;
  border: 5px #19b7cf solid;
  border-radius: 20px;
  height: 100px;
  width: 240px;
  line-height: 40px;
  margin-left: 150px;
  margin-top: 40px;
  font-size: 15px;
  font-weight: bold;
}

.first_part div span {
  font-weight: normal;
}

#second_part {
  width: 40%;
  height: 400px;
  text-align: center;
  float: left;
}

#third_part {
  width: 60%;
  height: 400px;
  text-align: center;
  float: left;
}
</style>
